<template>
  <div>
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        router
        :default-active="$route.path"
        :default-openeds="opened"
    >
      <!-- 根据用户身份显示其他菜单项 -->
      <template v-if="isSuperAdmin">
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>系统设置</span>
          </template>
          <el-menu-item index="1-1" @click="AddOrganization">机构添加</el-menu-item>
          <el-menu-item index="1-2" @click="AddJob">职位添加</el-menu-item>
        </el-sub-menu>
      </template>

      <template v-if="isSuperAdmin||isHRManager|| isPersonalFileAdmin">
        <!-- 人力资源档案管理菜单 -->
        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>人力资源档案管理</span>
          </template>
          <el-menu-item index="2-1" @click="FileRegistration">人力资源档案登记</el-menu-item>
          <el-menu-item index="2-2" @click="FileChange">人力资源档案变更</el-menu-item>
          <el-menu-item index="2-3" v-if="isHRManager||isSuperAdmin" @click="FileReview">人力资源档案登记复核</el-menu-item>
          <el-menu-item index="2-4" @click="FileQuery">人力资源档案查询</el-menu-item>
          <el-menu-item index="2-5" @click="FileDeletion">人力资源档案删除</el-menu-item>
          <el-menu-item index="2-6" @click="FileRecovery">人力资源档案恢复</el-menu-item>
        </el-sub-menu>
      </template>

      <!-- 根据用户身份显示其他菜单项 -->
      <template v-if="isSuperAdmin||isCompensationSpecialist||isCompensationManager">
        <el-sub-menu index="3">
          <template #title>
            <el-icon><location /></el-icon>
            <span>薪酬管理</span>
          </template>
          <el-sub-menu index="3-1">
            <template #title>薪酬标准管理</template>
            <el-menu-item index="3-1-1" @click="SalaryStandardRegistration">薪酬标准登记</el-menu-item>
            <el-menu-item index="3-1-2" v-if="isSuperAdmin||isCompensationManager" @click="SalaryStandardReview">薪酬标准复核</el-menu-item>
            <el-menu-item index="3-1-3" @click="SalaryStandardQuery">薪酬标准查询</el-menu-item>
            <el-menu-item index="3-1-4" @click="SalaryStandardChange">薪酬标准变更</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3-2">
            <template #title>薪酬发放管理</template>
            <el-menu-item index="3-2-1" @click="SalaryDistributionRegistration">薪酬发放登记</el-menu-item>
            <el-menu-item index="3-2-2" v-if="isSuperAdmin||isCompensationManager" @click="SalaryDistributionReview">薪酬发放复核</el-menu-item>
            <el-menu-item index="3-2-3" @click="SalaryDistributionQuery">薪酬发放查询</el-menu-item>
            <!--          <el-menu-item index="3-2-4" @click="SalaryDistributionChange">薪酬发放变更</el-menu-item>-->
          </el-sub-menu>
          <el-menu-item index="3-3" v-if="isSuperAdmin||isCompensationManager" @click="RewardsAndPunishment">奖惩管理</el-menu-item>
        </el-sub-menu>
      </template>

        <template v-if="isSuperAdmin">
        <el-sub-menu index="4">
          <template #title>
            <el-icon><location /></el-icon>
            <span>权限管理</span>
          </template>
          <el-menu-item index="4-1" @click="Permissionsettings">权限设置</el-menu-item>
        </el-sub-menu>
      </template>

      <!-- 个人信息菜单项始终显示 -->
      <el-sub-menu index="5">
        <template #title>
          <el-icon><location /></el-icon>
          <span>个人信息查看</span>
        </template>
        <el-menu-item index="5-1" @click="PersonalInformation">个人信息</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script>
import { computed, defineComponent, ref } from 'vue';
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from '@element-plus/icons-vue';
import { useStore } from "vuex";

export default defineComponent({
  name: "Menu",
  components: {
    Location,
    Document,
    Setting,
    IconMenu,
  },
  setup() {
    const activeNames = ref(['1']);
    const handleChange = (val) => {
      console.log(val);
    };
    const store = useStore();
    const user = computed(() => store.state.user);
    const isSuperAdmin = computed(() => user.value.upost === '超级管理员');
    const isHRManager = computed(() => user.value.upost === '人事经理');
    const isPersonalFileAdmin = computed(() => user.value.upost === '人事专员');
    const isCompensationManager= computed(() => user.value.upost === '薪酬经理');
    const isCompensationSpecialist= computed(() => user.value.upost === '薪酬专员');
    const opened = computed(() => {
      if (isSuperAdmin.value) {
        return ['1', '2', '3', '3-1', '3-2','3-3', '4', '5'];
      } else if (isHRManager.value || isPersonalFileAdmin.value) {
        return ['2', '5'];
      } else if (isCompensationManager.value || isCompensationSpecialist.value) {
        return ['3', '5'];
      } else {
        return ['5'];
      }
    });

    return {
      activeNames,
      handleChange,
      isSuperAdmin,
      isHRManager,
      isPersonalFileAdmin,
      isCompensationManager,
      isCompensationSpecialist,
      opened,
    };
  },

  methods:{
    Permissionsettings(){
      this.$router.push("/Permissionsettings")
    },
    PersonalInformation(){
      this.$router.push("/PersonalInformation")
    },
    AddOrganization() {
      this.$router.push("/AddOrganization")
    },
    AddJob() {
      this.$router.push("/AddJob")
    },
    FileRecovery(){
      this.$router.push("/FileRecovery")
    },
    FileRegistration() {
      this.$router.push("/FileRegistration")
    },
    FileChange() {
      this.$router.push("/FileChange")
    },
    FileReview() {
      this.$router.push("/FileReview")
    },
    FileQuery() {
      this.$router.push("/FileQuery")
    },
    FileDeletion() {
      this.$router.push("/FileDeletion")
    },
    SalaryStandardRegistration() {
      this.$router.push("/SalaryStandardRegistration")
    },
    SalaryStandardReview() {
      this.$router.push("/SalaryStandardReview")
    },
    SalaryStandardQuery() {
      this.$router.push("/SalaryStandardQuery")
    },
    SalaryStandardChange() {
      this.$router.push("/SalaryStandardChange")
    },
    SalaryDistributionRegistration() {
      this.$router.push("/SalaryDistributionRegistration")
    },
    SalaryDistributionReview() {
      this.$router.push("/SalaryDistributionReview")
    },
    SalaryDistributionQuery() {
      this.$router.push("/SalaryDistributionQuery")
    },
    SalaryDistributionChange() {
      this.$router.push("/SalaryDistributionChange")
    },
    RewardsAndPunishment(){
      this.$router.push("/RewardsAndPunishment")
    }
  }
})
</script>

<style scoped>

</style>